<template>
	<view class="services">
		<view class="top">
			<uv-navbar title="商品详情" height="44px" titleStyle="{font-weight: bold;font-size: 1.1rem;}"
				@leftClick="leftClick"></uv-navbar>
		</view>
		<!-- 服务 -->
		<view class="photo">
			<view class="one">
				<uv-swiper height="400rpx" :list="list"></uv-swiper>
			</view>
			<view class="two">
				<view class="two-left">￥<view class="color">1452.00</view>
				</view>

			</view>
			<view class="three">33.5码|Air Jordan 34“Snow Leopard”薄荷绿郭艾伦实战篮球鞋 黑白</view>
		</view>
		<!-- 商品介绍 -->
		<view class="introduced">
			<view class="head">商品介绍</view>
			<view class="center">
				<image src="../../static/image/运动鞋.jpg" mode=""></image>
			</view>
		</view>
		<!-- 盒子 -->
		<view class="box"></view>
		<!-- 下单 -->
		<view class="place">
			<view class="left">
				<view class="left1">
					<image src="../../static/image/首页.png" mode=""></image>
				</view>
				<view class="left2">首页</view>
			</view>
			<view class="left">
				<view class="left1">
					<image src="../../static/image/收藏.png" mode=""></image>
				</view>
				<view class="left2">收藏</view>
			</view>
			<view class="right">
				<uv-button @click="open" customStyle="{color:#149595;width:120px;}" size="large" color="#d6f1ed" shape="circle"
					text="加入购物车"></uv-button>
				<uv-button customStyle="{color:#149595;width:120px;}" size="large" color="#008c8c" shape="circle"
					text="立即购物"></uv-button>
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="pup">
			<uv-popup ref="popup" round="20" custom-style="height: 550rpx;" closeable="ture" closeIconPos="top-right"
				mode="bottom" @change="change1">
				<view class="more">
					<view class="more-left">
						<image src="../../static/logo.png" mode=""></image>
					</view>
					<view class="more-right">
						<view class="more-right1">￥200</view>
						<view class="more-right2">秋新品羽绒服女简约直筒短款</view>
					</view>
				</view>
				<view class="specifications">
					<view>规格</view>
					<view class="tabs">
						<view class="uv-page__tag-item" v-for="(item, index) in radios" :key="index">
							<uv-tags shape="circle " :text="`规格${index + 1}`" :plain="!item.checked" type="warning" :name="index"
								@click="radioClick">
							</uv-tags>
						</view>
					</view>
				</view>
				<view class="number">
					<view>数量</view>
					<view> <uv-number-box v-model="value1" @change="valChange"></uv-number-box>
					</view>
				</view>
				<view class="btn">
					<uv-button customStyle="{color:#149595;}" size="large" color="#008c8c" shape="circle"
						text="确定"></uv-button>
				</view>
			</uv-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: 0,
				// 标签
				radios: [{
						checked: true
					}, {
						checked: false
					}, {
						checked: false
					},
					{
						checked: false
					}
				],
				checkboxs: [{
					checked: true
				}, {
					checked: false
				}, {
					checked: false
				}, {
					checked: false
				}],
				// 轮播图
				list: [
					'/static/image/篮球鞋.jpg',
					'/static/image/篮球鞋.jpg',
					'/static/image/篮球鞋.jpg',
				],
				tips: '',
				value: '内容'

			}
		},
		methods: {
			// 步进器
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			// 单标签
			radioClick(name) {
				this.radios.map((item, index) => {
					item.checked = index === name ? true : false
				})
			},
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			},
			// 弹出层
			open() {
				this.$refs.popup.open('bottom');
			},
			change(e) {
				console.log('弹窗状态改变：', e);
			},
			change1(e) {
				console.log('弹窗状态改变：', e);
			},
			//返回login
			leftClick() {

				console.log('leftClick');
			},

		}
	}
</script>

<style>
	@import url('productdetails.scss');
</style>